/* eslint-disable vue/no-deprecated-slot-attribute */
<template>
  <el-form
    ref="uploadForm"
    :rules="formRules"
    :model="deepFormData"
    class="demo-ruleForm"
    label-position="left"
    label-width="120px"
  >
    <el-row>
      <el-col
        :span="formobj.width ? formobj.width : 24"
        v-for="(formobj, index) in formObj"
        :key="index"
        v-show="!formobj.notShow"
      >
        <el-form-item
          :label="formobj.label"
          :prop="formobj.prop"
        >
          <!-- inupt输入框 -->
          <el-input
            size="small"
            v-if="formobj.input"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
            @input="inputINPUT($event, index, formobj.prop)"
            @change="inputChange($event, index, formobj.prop)"
          ></el-input>
          <!-- textarea输入框 -->
          <el-input
            size="small"
            type="textarea"
            v-if="formobj.textarea"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
          ></el-input>
          <!-- select选择器 -->
          <el-select
            size="small"
            v-if="formobj.select"
            :disabled="formobj.disabled"
            v-model.sync="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
            @change="selectChange($event, index, formobj.prop)"
          >
            <el-option
              :label="options.label"
              :value="options.value"
              v-for="(options, index) in formobj.options"
              :key="index"
            >
            </el-option>
          </el-select>
          <!-- select搜索框 -->
          <el-select
            size="small"
            v-if="formobj.searchSelect"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            filterable
            remote
            reserve-keyword
            :placeholder="formobj.placeholder"
            :remote-method="(query) => remoteMethod(query, index, formobj.prop)"
            @change="selectChange($event, index, formobj.prop)"
            :loading="searchSelectLoading"
          >
            <el-option
              v-for="(item, index) in formobj.options"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- 年月日时分秒选择器 -->
          <el-date-picker
            type="datetime"
            size="small"
            v-if="formobj.dateTime"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
          ></el-date-picker>
          <!-- 年月日时分秒，开始和结束时间 -->
          <el-date-picker
            size="small"
            v-if="formobj.dateTimeRange"
            type="datetimerange"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- 时分秒选择器 -->
          <el-time-picker
            format="HH:mm:ss"
            size="small"
            v-if="formobj.timePicker"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
          >
          </el-time-picker>
          <!-- 时分秒选择器，开始和结束时间 -->
          <el-time-picker
            format="HH:mm:ss"
            is-range
            size="small"
            v-if="formobj.timePickerIsRange"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
          <!-- 年月日选择器 -->
          <el-date-picker
            size="small"
            v-if="formobj.datePicker"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
          >
          </el-date-picker>
          <!-- 年月日选择器，开始和介绍年月日 -->
          <el-date-picker
            type="daterange"
            size="small"
            v-if="formobj.datePickerIsRange"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            :placeholder="formobj.placeholder"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- switch开关 -->
          <el-switch
            size="small"
            v-if="formobj.switch"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
            @change="formSwitchChange($event)"
          ></el-switch>
          <!-- radio单选框 -->
          <el-radio-group
            v-if="formobj.radio"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
          >
            <el-radio
              :label="options.label"
              :value="options.value"
              v-for="(options, index) in formobj.options"
              :key="index"
            >
            </el-radio>
          </el-radio-group>
          <!-- checkbox复选框 -->
          <el-checkbox-group
            v-if="formobj.checkbox"
            :disabled="formobj.disabled"
            v-model="deepFormData[formobj.prop]"
          >
            <el-checkbox
              :label="options.label"
              :key="options.value"
              v-for="options in formobj.options"
            >
            </el-checkbox>
          </el-checkbox-group>
          <!-- 文件上传 --><!-- 如果对象有值就回显，没有值就为空 -->
          <el-upload
            :accept="formobj.accept ? formobj.accept : 'PNG,JPEG'"
            v-if="formobj.upload"
            :file-list="deepFormData[formobj.prop] ? deepFormData[formobj.prop] : []"
            :action="`${uploadUrl}${
              formobj.uploadObj.fileType ? formobj.uploadObj.fileType : ''
            }`"
            :limit="formobj.uploadObj.limit"
            :class="{
              hide:
                formobj.uploadObj.hideUpload ||
                deepFormData[formobj.prop].length == formobj.uploadObj.limit,
            }"
            :on-preview="handlePictureCardPreview"
            :on-remove="
              (file, fileList) =>
                handleRemove(
                  file,
                  fileList,
                  formobj.uploadObj.limit,
                  formobj.prop,
                  index
                )
            "
            :on-success="
              (response, file, fileList) =>
                uploadSuccess(
                  response,
                  file,
                  fileList,
                  formobj.uploadObj.limit,
                  formobj.prop,
                  index
                )
            "
            list-type="picture-card"
            :auto-upload="true"
          >
            <template #default><i class="el-icon-plus"></i></template>
          </el-upload>
          <el-dialog
            v-model="dialogVisible"
            v-if="formobj.upload"
            width="40%"
          >
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

          <!-- 按钮 -->
          <el-button
            size="small"
            v-if="formobj.button"
            :disabled="formobj.disabled"
            :loading="formobj.loading"
            :type="formobj.buttonType || 'primary'"
            @click="buttonClick(formobj.prop, index)"
            >{{ formobj.placeholder }}</el-button
          >
          <!-- text展示 -->
          <span v-if="formobj.text" v-text="deepFormData[formobj.prop]"></span>
          <!-- 计量单位 -->
          <span class="left10" v-if="formobj.unit">{{ formobj.unit }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { reactive, ref } from "@vue/reactivity";
export default {
  props: {
    formObj: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
    searchSelectOptionsCb:{
      type: Array,
    },
    rules: {
      type: Object,
      default: () => {}
    },
  },
  setup(props, context) {
    // 深拷贝
    const deepFormData = reactive(Object.assign(props.formData));
    const deepFormObj = reactive(Object.assign(props.formObj));
    const deepSearchOption = ref(Object.assign(props.searchSelectOptionsCb));
    const formRules = ref(Object.assign(props.rules));

    // 新增组别表单 DOM
    const uploadForm = ref(null);
    const dialogVisible = ref(false);
    // 图片上传地址
    const uploadUrl = ref('')
    const dialogImageUrl = ref('')
    // 搜索loading
    const searchSelectLoading = ref(false);

    // 下拉框变化
    const selectChange = (value, index, prop) => {
      console.log(value, index, prop);
      context.emit("selectChange", value, index, prop);
    };

    // input变化
    const inputChange = (value, index, prop) => {
      context.emit("inputChange", value, index, prop);
    };
    // input事件
    const inputINPUT = (value, index, prop) => {
      console.log(deepFormData)
      context.emit("inputINPUT", value, index, prop);
    };

    // 按钮点击
    const buttonClick = () => {
      uploadForm.value.validate(valid => {
        if (valid) {
          console.log('submit')
          context.emit('buttonClick', deepFormData);
        } else {
          console.log('error submit')
          return false
        }
      });
    };

    // switch
    const formSwitchChange = (value) => {
      console.log(value);
      context.emit('formSwitchChange', value);
    };

    // 远程搜索
    const remoteMethod = (query,index,prop) => {
      if (query) {
        searchSelectLoading.value = true;
        context.emit('querySelectValue',query,index,prop);
        setTimeout(() => {
          console.log(deepSearchOption.value)
          deepFormObj[index].options = deepSearchOption.value;
          console.log(deepFormObj[index].options)
          searchSelectLoading.value = false;
        }, 500)
      } else {
        searchSelectLoading.value  = [];
      }
    }

    // 文件预览
    const handlePictureCardPreview = (file) => {
      dialogImageUrl.value = file.url;
      dialogVisible.value = true;
    };
    // 文件上传成功回调
		const	uploadSuccess = (response, file, fileList, limit, prop, index) => {
      // 文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      deepFormObj[index].uploadObj.hideUpload = fileList.length === limit;
      this.pushUpload(file,fileList,limit,prop);
    };
    // 文件删除
		const	handleRemove = (file, fileList, limit, prop, index) => {
      // 文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      deepFormObj[index].uploadObj.hideUpload = fileList.length === limit;
      this.pushUpload(file,fileList,limit,prop);
    };
    // 对文件上传，删除进行赋值，调用form验证
		const	pushUpload = (file, fileList, limit, prop) => {
      if(fileList.length>0){
        deepFormData[prop] = fileList;
      }else{
        // 表示没有数据,把字段置空
        deepFormData[prop] = "";
      }
    };

    return {
      uploadForm,
      formRules,
      deepFormData,
      dialogVisible,
      uploadUrl,
      searchSelectLoading,
      selectChange,
      inputChange,
      inputINPUT,
      buttonClick,
      formSwitchChange,
      handlePictureCardPreview,
      remoteMethod,
      uploadSuccess,
      handleRemove,
      pushUpload,
    };
  },
};
</script>
<style lang="scss" scoped>
$width: 220px;
::v-deep(.el-input) {
  width: $width;
}

::v-deep(.el-select) {
  width: $width;
}
::v-deep(.el-form-item__content) {
  flex: inherit;
}
.el-date-editor::v-deep(.el-input) {
  width: $width;
}
.el-date-editor ::v-deep(.el-range-separator) {
  width: 20px !important;
}
.el-range-editor--small::v-deep(.el-input__inner) {
  width: 400px;
}

.el-textarea {
  width: 400px;
}
.left10 {
  display: inline-block;
  margin-left: 10px;
}
.hide {
  ::v-deep(.el-upload--picture-card) {
    display: none;
  }
}
.amap_div {
  overflow: hidden;
  height: 400px;
  width: 600px;
  position: relative;

  .sreach_ul {
    position: absolute;
    top: 1;
    background-color: white;
    z-index: 9;
    min-width: 210px;
    float: auto;
    height: 200px;
    overflow: auto;
    padding: 0 20px;
    line-height: 24px;
  }
}
</style>